<template>
  <div>
    <a-tree-select
      v-model="value"
      style="width: 100%"
      :tree-data="treeData"
      tree-checkable
      :show-checked-strategy="SHOW_PARENT"
      search-placeholder="Please select"
    />
    <table>
      <tr v-for="item in table" :key="item.id">
        <td v-for="(obj, index) in item.td" :key="index">
          <strong class="a_font" :class="obj.class" @click="active(obj)">{{
            obj.value
          }}</strong>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { TreeSelect } from "ant-design-vue";
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

const treeData = [
  {
    title: "Node1",
    value: "0-0",
    key: "0-0",
    children: [
      {
        title: "Child Node1",
        value: "0-0-0",
        key: "0-0-0",
      },
    ],
  },
  {
    title: "Node2",
    value: "0-1",
    key: "0-1",
    children: [
      {
        title: "Child Node3",
        value: "0-1-0",
        key: "0-1-0",
        disabled: true,
      },
      {
        title: "Child Node4",
        value: "0-1-1",
        key: "0-1-1",
      },
      {
        title: "Child Node5",
        value: "0-1-2",
        key: "0-1-2",
      },
    ],
  },
];
export default {
  name: "tree_index",
  data() {
    return {
      value: ["0-0-0"],
      treeData,
      SHOW_PARENT,
      table: [],
    };
  },
  methods: {
    is_obj(item) {
      let judge = Object.prototype.toString.call(item);
      return judge === "[object Object]" ? true : false;
    },
    active(obj) {
      if (obj.class.length > 0) {
        obj.class = [];
      } else {
        obj.class = ["a_active"];
      }
    },
  },
  created() {
    setTimeout(() => {
      this.table = [
        {
          td: [
            {
              value: "as",
              class: [],
              id: 1,
            },
            {
              value: "bd",
              class: [],
              id: 2,
            },
          ],
        },
        {
          td: [
            {
              value: "cs",
              class: [],
              id: 3,
            },
            {
              value: "aq",
              class: [],
              id: 4,
            },
          ],
        },
        {
          td: [
            {
              value: "aa",
              class: [],
              id: 5,
            },
            {
              value: "aq",
              class: [],
              id: 6,
            },
          ],
        },
      ];
    }, 1000);
  },
};
</script>
<style>
.a_active {
  color: red;
}
.a_font {
  font-size: 30px;
}
.a_font:hover {
  cursor: pointer;
}
</style>
